<template>
    <figure class="dataDesc-block">
        <img :src="item.image" width="200px" height="150px">
        <div class="content-block">
            <div>{{ item.dataName }}</div>
            <div>{{ item.dataDesc }}</div>
            <div>{{createTime}} - {{endTime}}</div>
        </div>
        <div class="button-block">
            <Button v-if="item.status !== 1" type="default" style="width:80px" @click="toOrderProject">创建项目</Button>
            <Button v-else disabled style="width:80px">已过期</Button>
            <Button type="primary" @click="handleViewHistory">项目历史</Button>
            <Button type="primary" @click="toOrderDatalab">续费</Button>
        </div>
    </figure>    
</template>

<script>
import { formatData } from '@/utils/format';
export default {
    props:['item'],
    computed:{
        createTime(){
            return formatData(this.item.createTime,{type:'detail'})
        },
        endTime(){
            return formatData(this.item.endTime,{type:'detail'})
        }
    },
    methods: {
        toOrderProject(){
            this.$router.push({path:`/order/${this.item.id}/${2}/${0}`})
        },
        toOrderDatalab(){
            this.$router.push({path:`/order/${this.item.id}/${1}/${1}`})
        },
        handleViewHistory(){
            this.$router.push({path:`/datalab/history/${this.item.id}`})
        },
    },
}
</script>

<style lang="scss" scoped>
   .dataDesc-block{
        display: flex;
        padding: 25px;
   }
   .content-block{
        margin-left: 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & > div{
            font-size: 12px;
            font-weight: 400;
            color: #999999;
        }
        & > div:first-of-type{
            font-size:16px;
            font-weight:600;
            color:rgba(51,51,51,1);
        }
        
   }
   .button-block{
       width: 150px;
       display: flex;
       justify-content: space-around;
       align-items: center;
       
       button + button {
           margin-left:5px;
       }
   }
</style>
